import React from "react";
import { createForm } from "@formily/core";
import { createSchemaField, ISchema } from "@formily/react";
import { UserInfoContext } from "src/App";

import { Form, FormItem, Input, FormProps } from "@formily/antd";
import { Typography } from "antd";
import UserInfo from ".";
import AvatarUpload from "src/components/AvatarUpload";

const { useEffect, useContext } = React;

const Detail: React.FC = (props) => {
  const context = useContext(UserInfoContext);
  const form = createForm({ readPretty: true });
  const SchemaField = createSchemaField({
    components: {
      FormItem,
      Input,
      AvatarUpload,
    },
  });

  const formProps: FormProps = {
    form,
    labelCol: 4,
    wrapperCol: 14,
    size: "large",
    style: { width: 550, padding: "24px 48px" },
  };

  const schema: ISchema = {
    type: "object",
    properties: {
      username: {
        type: "string",
        title: "用户名",
        required: true,
        "x-decorator": "FormItem",
        "x-component": "Input",
      },
      email: {
        type: "string",
        title: "邮箱",
        required: true,
        format: "email",
        "x-decorator": "FormItem",
        "x-component": "Input",
        "x-disabled": true,
      },
      avatar: {
        type: "array",
        title: "头像",
        required: true,
        "x-decorator": "FormItem",
        "x-component": "AvatarUpload",
      },
    },
  };

  useEffect(() => {
    const avatar = [{ url: context.userInfo.avatar }];
    form.setInitialValues({ ...context.userInfo, avatar });
  });

  return (
    <UserInfo>
      <Form {...formProps}>
        <Typography.Title level={2}>详情</Typography.Title>
        <SchemaField schema={schema} />
      </Form>
    </UserInfo>
  );
};

export default Detail;
